// @ts-nocheck
import React, { useEffect, useState } from 'react'
import { NavBar, Rate, ImageViewer } from 'antd-mobile'
import { useNavigate, useLocation } from 'react-router-dom'
import './HistoryReportDetails.less'
import { getCurrentUserInfo } from '@/utils/authority'
import {
  getEventDetails,
  getHistoryReportDetails,
  historyRead,
} from '../../service'

const HistoryReportDetails: React.FC<any> = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const itemData = location?.state
  const userId = getCurrentUserInfo()?.data?.id
  const [data, setData] = useState({})
  const [resultData, setResultData] = useState({})
  const [visibile, setVisible] = useState(false)

  const getDetailsResult = async () => {
    const params = {
      userId: userId,
      processInstanceId: itemData?.processInstanceId || itemData?.id,
    }
    try {
      const { data } = await getHistoryReportDetails(params)
      setData(data)
    } catch {}
  }
  const getDetails = async () => {
    const params = {
      userId: userId,
      processInstanceId: itemData?.processInstanceId || itemData?.id,
    }
    try {
      const { data } = await getEventDetails(params)
      setResultData(data)
    } catch {}
  }
  const dataRead = async () => {
    const params = {
      userId,
      processInstanceId: itemData?.processInstanceId || itemData?.id,
    }
    try {
      await historyRead(params)
    } catch {}
  }
  useEffect(() => {
    getDetailsResult()
    getDetails()
    dataRead()
  }, [])

  return (
    <div className="ReportDetails-contarnier">
      <div className="header">
        <div>
          <NavBar onBack={() => navigate(-1)}>
            <div className="commontitle">历史详情</div>
          </NavBar>
        </div>
      </div>
      <div className="ReportDetails-card">
        <div className="ReportDetails-box">
          <div className="ReportDetails-box-card">
            <div className="ReportDetails-box-card-title ">
              {resultData?.questiontitle || ''}
            </div>
            <div className="ReportDetails-box-card-type">
              <span>{resultData?.eventType || ''}</span>
            </div>
            <div className="ReportDetails-box-card-time">
              <div>{resultData?.hadress || ''}</div>
              <div>{resultData?.createTime || ''}</div>
            </div>
            <div className={resultData?.state == 'COMPLETED' ? 'ycl' : 'ysl'}>
              {resultData?.state == 'COMPLETED' ? '已完结' : '已处理'}
            </div>
          </div>
        </div>
        <div className="ReportDetails-description">
          <div className="ReportDetails-description-title">事件描述</div>
          <div className="ReportDetails-description-box">
            <p>{resultData?.desc || ''}</p>
            <div className="ReportDetails-description-box-img">
              {(resultData?.fileFront || []).map((item) => (
                <>
                  <img onClick={() => setVisible(true)} src={item} alt="" />
                  <ImageViewer
                    classNames={{
                      mask: 'customize-mask',
                      body: 'customize-body',
                    }}
                    image={item}
                    visible={visibile}
                    onClose={() => {
                      setVisible(false)
                    }}
                  />
                </>
              ))}
            </div>
          </div>
        </div>
        <div className="ReportDetails-description">
          <div className="ReportDetails-description-title">处理结果</div>
          <div className="ReportDetails-description-box">
            <div>地址：{data?.postName}</div>
            <div className="ReportDetails-description-box-time">
              <div>网格员：{data?.realName}</div>
              <div>{data?.time}</div>
            </div>
            <p>{data?.msg}</p>
            <div className="ReportDetails-description-box-img">
              {(data?.attachment || []).map((item) => (
                <img src={item} alt="" />
              ))}
            </div>
          </div>
        </div>
        {data?.evaluateInfo?.score && (
          <div className="ReportDetails-description">
            <div className="ReportDetails-description-title">我的评分</div>
            <div className="ReportDetails-description-box">
              <div className="ReportDetails-description-box-mark">
                <span>评分：</span>
                <Rate value={data?.evaluateInfo?.score || ''} />
                <span className="mark-val">
                  {data?.evaluateInfo?.score
                    ? `${data?.evaluateInfo?.score}.0`
                    : data?.evaluateInfo?.score}
                </span>
              </div>
              <div className="ReportDetails-description-box-evaluate">
                <span>评价内容：</span>
                <span>{data?.evaluateInfo?.fullMsg}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default HistoryReportDetails
